<template>
    <div class="apiSearchContainer">
        <span class="inputLabel">账号</span>
        <el-input v-model="userSearchData.userAccount" placeholder="账号" class="searchInfoInput"></el-input>

        <span class="inputLabel">昵称</span>
        <el-input v-model="userSearchData.userNickName" placeholder="昵称" class="searchInfoInput"></el-input>

        <el-button type="primary" icon="SearchOutlined" class="searchButtonClass" :loading="searchLoading" @click="queryUserInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script setup name="UserSearch" lang="ts">
import {userInfoQuery} from "@/request/user";
import {computed, ref} from "vue";
import {useUserInfoStore} from "@/stores/userInfo/userInfo";

let searchLoading = ref(false);

let userSearchData = computed(() => {return useUserInfoStore().userSearchData});

function queryUserInfo() {
    searchLoading.value = true
    userInfoQuery(userSearchData.value).then(res => {
        if (res["code"] === '200') {
            useUserInfoStore().resetUserDataList(res.data);
        }
        searchLoading.value = false
    }).catch(res => {
        searchLoading.value = false
    })
}

function resetInput() {
    let info = {
        userAccount: '',
        userNickName: ''
    }
    useUserInfoStore().resetUserSearchData(info);
}
</script>

<style scoped lang="less">
.apiSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>